<page-header></page-header>

<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-card nzTitle="菜单" [nzExtra]="menuTemplate">
      <nz-tree
        nzBlockNode
        [nzData]="nodes"
        [nzSelectedKeys]="selectedNodes"
        nzShowLine
        nzDraggable
        (nzClick)="menuClick($event)"
        (nzOnDragEnd)="menuDrag($event)"
      >
      </nz-tree>
    </nz-card>
    <ng-template #menuTemplate>
      <nz-radio-group [(ngModel)]="currentMenuFiler" (ngModelChange)="queryMenuTree()" style="margin-right: 30px">
        <label nz-radio-button nzValue="">全部</label>
        <label nz-radio-button nzValue="false">启用</label>
        <label nz-radio-button nzValue="true">禁用</label>
      </nz-radio-group>
      <button (click)="add()" nz-button acl [acl-ability]="'add'" nzType="primary">新建</button>
    </ng-template>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card nzTitle="详情">
      <sf
        *ngIf="currentMenu && currentMenu.parentId"
        #sf
        mode="edit"
        [schema]="schema"
        [ui]="ui"
        [formData]="currentMenu"
        (formSubmit)="save($event)"
        (formReset)="reset($event)"
        (formValueChange)="formValueChange($event)"
      >
        <ng-template sf-template="antIcon" let-i let-ui="ui" let-schema="schema">
          <div nz-row>
            <div nz-col nz-col [nzSpan]="12" *ngIf="i.value">
              <i nz-icon [nzType]="i.value.value" [nzTheme]="i.value.theme" style="font-size: 24px; width: 50px"></i>
            </div>
            <div nz-col nz-col [nzSpan]="12" *ngIf="!i.value">
              <span>请选择</span>
            </div>
            <div nz-col [nzSpan]="12">
              <nz-radio-group>
                <button nz-button type="button" nzType="link" nzSize="small" (click)="choseIcon()">选择图标</button>
                <button nz-button type="button" nzType="link" nzSize="small" (click)="deleteIcon()">删除图标</button>
              </nz-radio-group>
            </div>
          </div>
        </ng-template>
      </sf>
    </nz-card>
    <nz-card nzTitle="权限" [nzExtra]="permisionTemplate">
      <st [widthMode]="{ type: 'strict' }" [data]="currentMenuPermissions" [columns]="permissionColmuns"></st>
    </nz-card>
    <ng-template #permisionTemplate>
      <nz-radio-group [(ngModel)]="currentPermissionFilter" (ngModelChange)="queryPermission()" style="margin-right: 30px">
        <label nz-radio-button nzValue="">全部</label>
        <label nz-radio-button nzValue="false">启用</label>
        <label nz-radio-button nzValue="true">禁用</label>
      </nz-radio-group>
      <button nz-button nzType="primary" *ngIf="currentMenu && currentMenu.id && !currentMenu.deleted" (click)="addPermission()"
        >添加</button
      >
    </ng-template>
  </div>
</div>
